<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/bound.js"></script>
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				top:0;
				left:0;
				
			}
			.warp{
				width: 100px;
				height: 100px;
				background: green;
				position: absolute;
				top:50%;
				left:50%;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="warp"></div>
		
		<script type="text/javascript">			
			$('.box').on('mousedown',function(ev){
				var x = ev.pageX;
				var y = ev.pageY;
				var l = parseFloat($('.box').css('left'));
				var t = parseFloat($('.box').css('top'));				
				// 给文档加事件
				$(document).on('mousemove',function(ev){
					var disX = ev.pageX - x;
					var disY = ev.pageY - y;		
					$('.box').css({			// 给box重新设置位置
						left:l+disX,
						top:t+disY
					})
					
					var onoff = bound($('.box')[0],$('.warp')[0]);
					if(onoff){
						
					}									
					console.log(onoff)
				})				
				// 抬起鼠标,把事件解绑
				$(document).on('mouseup',function(){
					$(document).off('mousemove');
				})
			})
		</script>
	</body>
</html>
